//以下是"webpack": "4.8.3", "webpack-cli": "^2.0.13"的配置
//MiniCssExtractPlugin插件地址https://github.com/webpack-contrib/mini-css-extract-plugin
//可以把css打包成外部文件，而不像style-loader一样把内联到文件中
//另外如果devDependencies里没有写这2个："webpack": "^4.4.0","webpack-cli": "^2.0.13"的话，就会在调用插件打包时，出现未定义webpack的错误
//说明https://segmentfault.com/a/1190000012789253
const path = require('path')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const devMode = process.env.NODE_ENV !== 'production';//得先在package.json里设置cross-env NODE_ENV=development
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
    optimization: {
        splitChunks: {
            chunks: 'async',
          },
        minimizer: [new OptimizeCssAssetsPlugin({})],
      },
    plugins: [
        
        new CleanWebpackPlugin(),
        //插件的执行与元素索引有关
        new HtmlWebpackPlugin({
            title:'哈哈标题,但不起作用',
            //最后生成的文件名,要改路径也可以,如:filename: '/lujin/index22.html',
            filename: 'index.html',
            //源文件
            template: "./src/index.html",
            //chunks的值来自entry的key值
            chunks: ['index']
        }),
 /*        new HtmlWebpackPlugin({
            //最后生成的文件名,要改路径也可以,如:filename: '/lujin/index22.html',
            filename: 'detail.html',
            //源文件
            template: "./src/index.html",
            //chunks的值来自entry的key值
            chunks: ['search']
        }), */
    new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
        //filename: "css/[hash:5].css",
        filename: devMode ? './css/[name].css' : './css/[name].[hash].css',
        chunkFilename: devMode ? './css/[id].css' : './css/[name].[hash:5].css',
    }),
        new webpack.HotModuleReplacementPlugin(),
        new VueLoaderPlugin()
    ],
    devServer: {
        //contentBase: path.join(__dirname, "dist"),
        //contentBase: "http://www.acai188.cn/test/",
        //port: 80, //端口改为9000
       open:true, // 自动打开浏览器
        index:'index.html', // 与HtmlWebpackPlugin中配置filename一样
        inline:true, // 默认为true, 意思是，在打包时会注入一段代码到最后的js文件中，用来监视页面的改动而自动刷新页面,当为false时，网页自动刷新的模式是iframe，也就是将模板页放在一个frame中
        hot: true,
        proxy: {
            // '/test': {
            //     changeOrigin: true,
            //     target: 'http://localhost:80',
            //     secure: false,
            //     // pathRewrite: {
            //     //     '^/test': '/test'
            //     //   }
            // },
           /*  '*': {
                changeOrigin: true,
                target: 'http://localhost:3000/',
                secure: false,
            } */
        },
        compress:true //gzip压缩,服务器压缩,浏览器解压
      } ,
    entry: {
        index: './src/main.js'
        //search: './src/js/search.js',
    },
    externals: {
        //externals具体干啥的,得去研究研究
        //比如引入import Vue from 'vue'   import axios from 'axios'和import $ from 'jquery',
        //然后声明下方代码,就可以不打包,从而减小打包文件的体积
        // "vue": "Vue",
        // "axios":"axios",
        //"jquery":"$"
    
      },
    output: {
        //此处的[name]对应entry的key值
        filename: './js/[name].js',
         path: path.resolve(__dirname, 'dist')
    },
    watch: devMode ? true : false,
    resolve: {
        alias: {
           //'vue$': 'vue/dist/vue.esm.js',//使用compiler版的vue
            'vue$': 'vue/dist/vue.runtime.esm.js',//使用runtime版的vue
            //'@': path.resolve(__dirname,'./src/components/')
            "@": path.join(__dirname, 'src'),
            "@ro": path.join(__dirname,'node_modules')
            // path.join和path.resolve的区别https://blog.csdn.net/qq_33745501/article/details/80270708
        }
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                exclude: /^node_modules$/,
                use: {
                    loader: 'vue-loader'
                }
              },
              {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env'],
                    plugins: ['@babel/plugin-transform-runtime','@babel/plugin-syntax-dynamic-import']
                  }
                }
              },
            {
                test: /\.css$/,
                exclude: /^node_modules$/,
                //use: [MiniCssExtractPlugin.loader,"css-loader"]
                //use: [MiniCssExtractPlugin.loader,'vue-style-loader',"css-loader"]
                use: [MiniCssExtractPlugin.loader,"css-loader"]//经过测试,有了MiniCssExtractPlugin.loader,就可以不用vue-style-loader
            },
            {
                test: /\.(png|jpg|gif|woff|woff2|svg|ttf|eot)$/i,
                exclude: /^node_modules$/,
                use: [
                  {
                    loader: 'url-loader',
                        options: {
                        //默认正好是8kb
                        limit: 8192,
                        // name: 'img/[name].[hash:7].[ext]'
                        publicPath:devMode?'../':'/assets/',//打包文件中所有通过<<相对路径引用的资源>>都会被配置的路径所替换
                        name: 'img/[name].[ext]'
                        //css文件bg的路径中,图片路径要写对,但是dev和build打包的路径以publicPath与name为准,也就是这2个key组成了图片最后的路径
                    }
                  }
                ]
              }]
    }

}